<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理员登录成功</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
        }

        h1 {
            color: #333;
            text-align: center;
        }

        a {
            display: inline-block;
            margin: 5px;
            padding: 10px 15px;
            background-color: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 5px;
        }

        a:hover {
            background-color: #0056b3;
        }

        /* 按钮样式 */
        button {
            padding: 10px 15px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }

        button:hover {
            background-color: #218838;
        }

        /* 搜索框和表单样式 */
        form {
            margin: 20px 0;
        }

        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="number"] {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 5px;
        }

        input[type="submit"] {
            padding: 10px 15px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            border-radius: 5px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        .edit-row {
            display: none;
        }
    </style>
</head>
<body>
<h1>恭喜你，<span th:text="${username}"></span> 管理员登录成功！</h1>
<a th:href="@{/adminSuccessPage(username=${username}, page=0, size=10)}">用户信息</a>
<a th:href="@{/adminTicketsPage(username=${username}, page=0, size=10)}">购票信息</a>
<a th:href="@{/adminMoviesPage(username=${username}, page=0, size=10)}">电影信息</a>
<a th:href="@{/adminGenersPage(username=${username}, page=0, size=10)}">类别信息</a>
<a th:href="@{/adminDirectorsPage(username=${username}, page=0, size=10)}">导演信息</a>
<a th:href="@{/adminActorsPage(username=${username}, page=0, size=10)}">演员信息</a>
<a th:href="@{/adminReviewsPage(username=${username}, page=0, size=10)}">评论信息</a>
<br>
<!-- 添加添加用户按钮 -->
<button id="addUserBtn">添加用户</button>


<!-- 添加搜索框和搜索按钮 -->
<form th:action="@{/adminSearchUsersPage}" method="get">
    <input type="hidden" th:name="username" th:value="${username}">
    <input type="hidden" th:name="size" th:value="${pageSize}">
    <input type="hidden" th:name="page" th:value="0">
    <label for="searchUsername">根据用户名搜索:</label>
    <input type="text" id="searchUsername" name="searchUsername">
    <input type="submit" value="搜索">
</form>

<!-- 显示搜索结果 -->
<div th:if="${not #lists.isEmpty(allUsers)}">
    <h2>搜索结果：</h2>
    <table>
        <thead>
        <tr>
            <th>用户名</th>
            <th>密码</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>角色</th>
            <th>地址</th>
            <th>注册时间</th>
            <th>余额</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user : ${allUsers}">
            <td th:text="${user.uname}"></td>
            <td th:text="${user.password}"></td>
            <td th:text="${user.phone}"></td>
            <td th:text="${user.email}"></td>
            <td th:text="${user.role}"></td>
            <td th:text="${user.address}"></td>
            <td th:text="${user.rtime}"></td>
            <td th:text="${user.balance}"></td>
        </tr>
        </tbody>
    </table>
</div>

<h2>所有用户信息</h2>
<table>
    <thead>
    <tr>
        <th>用户名</th>
        <th>密码</th>
        <th>手机号</th>
        <th>邮箱</th>
        <th>角色</th>
        <th>地址</th>
        <th>注册时间</th>
        <th>余额</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user : ${Users}">
        <td th:text="${user.uname}"></td>
        <td th:text="${user.password}"></td>
        <td th:text="${user.phone}"></td>
        <td th:text="${user.email}"></td>
        <td th:text="${user.role}"></td>
        <td th:text="${user.address}"></td>
        <td th:text="${user.rtime}"></td>
        <td th:text="${user.balance}"></td>
        <td><button class="edit-btn" th:data-username="${user.uname}" th:data-uuid="${user.uuid}">修改</button></td>
        <td><button class="delete-btn" th:data-uuid="${user.uuid}">删除</button></td>
    </tr>
    </tbody>
</table>

<!-- 分页导航栏 -->
<div>
    <!-- 首页 -->
    <a th:href="@{/adminSuccessPage(username=${username}, page=0, size=${pageSize}, searchUsername=${searchUsername})}">首页</a>

    <!-- 上一页 -->
    <a th:if="${currentPage > 0}" th:href="@{/adminSuccessPage(username=${username}, page=${currentPage - 1}, size=${pageSize}, searchUsername=${searchUsername})}">上一页</a>

    <!-- 下一页 -->
    <a th:if="${currentPage < totalPages - 1}" th:href="@{/adminSuccessPage(username=${username}, page=${currentPage + 1}, size=${pageSize}, searchUsername=${searchUsername})}">下一页</a>

    <!-- 末页 -->
    <a th:href="@{/adminSuccessPage(username=${username}, page=${totalPages - 1}, size=${pageSize}, searchUsername=${searchUsername})}">末页</a>

    <!-- 显示当前页和总页数 -->
    <span>当前页: <span th:text="${currentPage + 1}"></span> / 总页数: <span th:text="${totalPages}"></span></span>
    <form th:action="@{/adminSuccessPage}" method="get">
        <input type="hidden" th:name="username" th:value="${username}">
        <input type="hidden" th:name="size" th:value="${pageSize}">
        <input type="hidden" th:name="searchUsername" th:value="${searchUsername}">
        <label for="pageNumber">跳转到页数:</label>
        <input type="number" id="pageNumber" name="page" min="0" th:max="${totalPages - 1}" required>
        <input type="submit" value="跳转">
    </form>
</div>


<!-- 添加用户模态框 -->
<div id="addUserModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>添加用户</h2>
        <form id="addUserForm">
            <label for="uname">用户名:</label>
            <input type="text" id="uname" name="uname" required><br>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required><br>
            <label for="phone">手机号:</label>
            <input type="text" id="phone" name="phone"><br>
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email"><br>
            <label for="role">角色:</label>
            <input type="text" id="role" name="role" value="用户" readonly><br>
            <label for="address">地址:</label>
            <input type="text" id="address" name="address"><br>
            <label for="balance">余额:</label>
            <input type="text" id="balance" name="balance" value="0" readonly><br>
            <button type="submit">保存</button>
        </form>
    </div>
</div>

<!-- 修改用户信息模态框 -->
<div id="editUserModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>修改用户信息</h2>
        <table>
            <tbody>
            <tr>
                <td>
                    <table>
                        <tr>
                            <th>用户名</th>
                            <td id="editUserInfoUsername"></td>
                        </tr>
                        <tr>
                            <th>密码</th>
                            <td id="editUserInfoPassword"></td>
                        </tr>
                        <tr>
                            <th>手机号</th>
                            <td id="editUserInfoPhone"></td>
                        </tr>
                        <tr>
                            <th>邮箱</th>
                            <td id="editUserInfoEmail"></td>
                        </tr>
                        <tr>
                            <th>角色</th>
                            <td id="editUserInfoRole"></td>
                        </tr>
                        <tr>
                            <th>地址</th>
                            <td id="editUserInfoAddress"></td>
                        </tr>
                        <tr>
                            <th>余额</th>
                            <td id="editUserInfoBalance"></td>
                        </tr>
                    </table>
                </td>
                <td>
                    <form id="editUserForm">
                        <input type="hidden" id="editUuid" name="uuid">
                        <label for="editUsername">用户:</label>
                        <input type="text" id="editUsername" name="uname"><br>
                        <label for="editPassword">密码:</label>
                        <input type="password" id="editPassword" name="password" required><br>
                        <label for="editPhone">手机号:</label>
                        <input type="text" id="editPhone" name="phone"><br>
                        <label for="editEmail">邮箱:</label>
                        <input type="email" id="editEmail" name="email"><br>
                        <label for="editRole">角色:</label>
                        <input type="text" id="editRole" name="role" readonly><br>
                        <label for="editAddress">地址:</label>
                        <input type="text" id="editAddress" name="address"><br>
                        <label for="editBalance">余额:</label>
                        <input type="text" id="editBalance" name="balance" readonly><br>
                        <button type="submit">保存</button>
                    </form>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    // 获取模态框和按钮元素
    var addModal = document.getElementById("addUserModal");
    var addBtn = document.getElementById("addUserBtn");
    var addSpan = document.getElementsByClassName("close")[0];

    var editModal = document.getElementById("editUserModal");
    var editSpan = document.getElementsByClassName("close")[1];

    // 点击添加用户按钮时显示添加用户模态框
    addBtn.onclick = function() {
        addModal.style.display = "block";
    };

    // 点击关闭按钮时隐藏添加用户模态框
    addSpan.onclick = function() {
        addModal.style.display = "none";
    };

    // 点击关闭按钮时隐藏修改用户信息模态框
    editSpan.onclick = function() {
        editModal.style.display = "none";
    };

    // 点击修改按钮时显示修改用户信息模态框
    document.querySelectorAll('.edit-btn').forEach(function(button) {
        button.addEventListener('click', function() {
            var username = this.dataset.username;
            var uuid = this.dataset.uuid;
            fetch('/user/info?username=' + username)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        var user = data.user;
                        // 验证用户信息是否完整
                        if (!user.uname || !user.password || !user.phone || !user.email || !user.role || !user.address || !user.balance) {
                            throw new Error('返回的用户信息不完整');
                        }

                        // 存储 uuid 到隐藏输入框
                        document.getElementById('editUuid').value = uuid;

                        document.getElementById('editUserInfoUsername').textContent = user.uname;
                        document.getElementById('editUserInfoPassword').textContent = user.password;
                        document.getElementById('editUserInfoPhone').textContent = user.phone;
                        document.getElementById('editUserInfoEmail').textContent = user.email;
                        document.getElementById('editUserInfoRole').textContent = user.role;
                        document.getElementById('editUserInfoAddress').textContent = user.address;
                        document.getElementById('editUserInfoBalance').textContent = user.balance;

                        document.getElementById('editUsername').value = user.uname;
                        document.getElementById('editPassword').value = user.password;
                        document.getElementById('editPhone').value = user.phone;
                        document.getElementById('editEmail').value = user.email;
                        document.getElementById('editRole').value = user.role;
                        document.getElementById('editAddress').value = user.address;
                        document.getElementById('editBalance').value = user.balance;

                        var editModal = document.getElementById('editUserModal');
                        editModal.style.display = 'block';
                    } else {
                        alert(data.error);
                    }
                })
                .catch(error => {
                    console.error('获取用户信息失败:', error);
                    alert('获取用户信息失败，请稍后重试: ' + error.message);
                });
        });
    });

    // 提交添加用户表单时发送请求
    document.getElementById("addUserForm").addEventListener("submit", function(event) {
        event.preventDefault();

        var uname = document.getElementById("uname").value;
        var password = document.getElementById("password").value;
        var phone = document.getElementById("phone").value;
        var email = document.getElementById("email").value;
        var role = document.getElementById("role").value;
        var address = document.getElementById("address").value;
        var balance = document.getElementById("balance").value;

        var user = {
            uname: uname,
            password: password,
            phone: phone,
            email: email,
            role: role,
            address: address,
            balance: balance
        };

        fetch('/user/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(user)
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    addModal.style.display = "none";
                    // 刷新页面
                    location.reload();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                alert('请求出错，请稍后重试');
            });
    });

    // 提交修改用户信息表单时发送请求
    document.getElementById("editUserForm").addEventListener("submit", function(event) {
        event.preventDefault();

        var uuid = document.getElementById("editUuid").value;
        var username = document.getElementById("editUsername").value;
        var password = document.getElementById("editPassword").value;
        var phone = document.getElementById("editPhone").value;
        var email = document.getElementById("editEmail").value;
        var role = document.getElementById("editRole").value;
        var address = document.getElementById("editAddress").value;
        var balance = document.getElementById("editBalance").value;

        var user = {
            uuid: uuid,
            uname: username,
            password: password,
            phone: phone,
            email: email,
            role: role,
            address: address,
            balance: balance
        };

        fetch('/user/updateUserInfo', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(user)
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    editModal.style.display = "none";
                    // 刷新页面
                    location.reload();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                alert('请求出错，请稍后重试');
            });
    });
    // 点击删除按钮时删除用户信息
    document.querySelectorAll('.delete-btn').forEach(function(button) {
        button.addEventListener('click', function() {
            var uuid = parseInt(this.dataset.uuid); // 将 uuid 转换为数值类型
            if (confirm('确定要删除该用户信息吗？')) {
                fetch('/user/deleteUser', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ uuid: uuid })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert(data.message);
                            // 刷新页面
                            location.reload();
                        } else {
                            alert(data.message);
                        }
                    })
                    .catch(error => {
                        alert('请求出错，请稍后重试');
                    });
            }
        });
    });
</script>
</body>
</html>